<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>

<html>
<head>
    <title>学生管理系统</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f7f7f7;
        color: #333;
        margin: 0;
        padding: 0;
    }

    h1 {
        text-align: center;
        color: #4CAF50;
        margin: 20px 0;
    }

    hr {
        margin: 20px auto;
        width: 80%;
        border: 1px solid #ddd;
    }

    table {
        border-collapse: collapse;
        width: 80%;
        margin: 20px auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    th, td {
        padding: 12px;
        border: 1px solid #ddd;
        text-align: center;
    }

    th {
        background-color: #4CAF50;
        color: white;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #f1f1f1;
    }

    button {
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button a {
        text-decoration: none;
        color: inherit;
    }

    .delete-btn {
        background-color: #ff4d4d;
        color: white;
    }

    .delete-btn:hover {
        background-color: #ff1a1a;
    }

    .update-btn {
        background-color: #4CAF50;
        color: white;
    }

    .update-btn:hover {
        background-color: #45a049;
    }

    .add-btn {
        background-color: #ff9800;
        color: white;
        margin-right: 10px;
    }

    .add-btn:hover {
        background-color: #e68a00;
    }

    #selectAll {
        cursor: pointer;
    }
    .logout-btn {
        background-color: #007BFF;
        color: white;
        margin-left: 35%;

    }

    .logout-btn:hover {
        background-color: #0056b3;

    }
    .header {
        display: flex;
        margin-left:40%;
        align-items: center;
        padding: 10px;
    }
</style>

<body>
<div  class="header">
    <h1 >欢迎进入学生管理系统</h1>
    <button type="button" class="logout-btn" onclick="logout()">注销</button>
</div>

<hr>
<form id="bulkDeleteForm" action="${pageContext.request.contextPath}/delete" method="post" onsubmit="return confirmBulkDelete()">
    <table>
        <tr>
            <th><input type="checkbox" id="selectAll" onclick="toggleSelectAll()"></th>
            <th>ID</th>
            <th>姓名</th>
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>专业</th>
            <th>
                <button type="submit" class="delete-btn">批量删除</button>
                <button type="button" class="add-btn"><a href="manager/Addstudent.jsp">添加学生</a></button>
            </th>
        </tr>
        <c:forEach var="user" items="${applicationScope.userList}">
            <tr>
                <td><input type="checkbox" class="selectItem" name="ids" value="${user.id}"></td>
                <td>${user.id}</td>
                <td>${user.name}</td>
                <td>${user.username}</td>
                <td>${user.age}</td>
                <td>${user.gender}</td>
                <td>${user.major}</td>
                <td>
                    <button type="button" class="delete-btn" onclick="deleteSingle(${user.id})">删除</button>
                    <button type="button" class="update-btn" onclick="updateUser(${user.id})">修改</button>
                </td>
            </tr>
        </c:forEach>
    </table>
</form>

<script>
    function toggleSelectAll() {
        var selectAllCheckbox = document.getElementById('selectAll');
        var checkboxes = document.getElementsByClassName('selectItem');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = selectAllCheckbox.checked;
        }
    }

    function confirmDelete() {
        return confirm('你确定要删除这个用户吗？');
    }

    function confirmBulkDelete() {
        var selectedItems = document.querySelectorAll('.selectItem:checked');
        if (selectedItems.length === 0) {
            alert('请选择至少一个用户进行删除。');
            return false;
        }
        return confirm('你确定要删除选中的用户吗？');
    }

    function deleteSingle(id) {
        if (confirm('你确定要删除这个用户吗？')) {
            var form = document.createElement('form');
            form.method = 'post';
            form.action = '${pageContext.request.contextPath}/delete';

            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'ids';
            input.value = id;

            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }
    }

    function updateUser(id) {
        // Create a hidden form for updating the user
        var form = document.createElement('form');
        form.method = 'post';
        form.action = '${pageContext.request.contextPath}/EchoUser';

        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'id';
        input.value = id;

        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }
    function logout() {
        window.location.href = `${pageContext.request.contextPath}/logout`;
    }
</script>

</body>
</html>
